<template>
  <div class="app-container page-container right-side-dialog">
    <div class="content_view">
      <el-row>
        <el-col :span="6" class="tree_view" :style="{minHeight: height + 'px'}">
          <el-tree
            :data="dept_tree_data"
            default-expand-all
            @node-click="getTableData"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{node, data }">
              <img v-if="node.level === 1" src="../../../assets/images/dept_tree_1.png" alt="" width="15px">
              <img v-if="!node.isLeaf && node.level != 1" src="../../../assets/images/dept_tree_2.png" alt="" width="15px">
              <img v-if="node.isLeaf" src="../../../assets/images/dept_tree_3.png" alt="" width="15px">
              <span style="font-size:14px;">{{ data.dept_name }}</span>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="18" class="table_view" :style="{minHeight: height + 'px'}">
          <div class="main-header">
            <el-row :gutter="20">
              <el-col :span="10" class="left">当前部门：{{select_dept_data.dept_name}}</el-col>
              <el-col :span="14" class="right">
                <span v-if="auth.save != -1" class="spp-btn spp-btn-primary fr" @click="deptEditVisible = true">新增</span>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="main-body">
              <el-table ref="table" :data="select_dept_data.children" :height="height-80" size="mini" stripe>
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column label="部门名称" prop="dept_name" min-width="150" align="left" />
                <el-table-column label="部门编码" prop="dept_code" min-width="100" align="left" />
                <el-table-column label="上级部门" prop="dept_pname" min-width="150" align="left" />
                <el-table-column label="操作" min-width="150" fixed="right" align="left">
                  <template slot-scope="scope">
                    <el-button v-if="auth.update != -1" type="text" @click="deptUpdate(scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 新增编辑部门 -->
    <el-dialog :title="dept_edit_form.title" :append-to-body="true" :visible.sync="deptEditVisible" width="720px" :close-on-click-modal="false">
      <el-form ref="dept_edit_form" label-width="0">
        <div style="margin-left: 5px;">上级部门 {{select_dept_data.dept_name}}</div>
        <el-form-item prop="dept_name">
          <div class="form_lable">部门名称</div>
          <el-input v-model="dept_edit_form.dept_name" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <span class="spp-btn" @click="deptEditVisible = false">取消</span>
        <span class="spp-btn spp-btn-primary" @click="deptEditSubmit()">保存</span>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { save, tree, update } from '@/api/pajx/sys/dept'
import { mapState } from 'vuex'
export default {
  name: 'SysDept',
  components: { },
  data() {
    return {
      height: window.innerHeight - 100,
      auth: {},
      deptEditVisible: false,
      dept_edit_form: {
        title: '新增部门',
        type: 'add',
        dept_name: '',
        dept_pcode: '',
        dept_id:''
      },
      dept_tree_data: [],
      select_dept_data: {}
    }
  },
  computed: {
     ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {
    deptEditVisible(val) {
      if (val) {
        this.dept_edit_form.title = this.dept_edit_form.type==='add'?'新增部门':'编辑部门'
      }
      if (!val) {
        this.dept_edit_form.dept_name = ''
        this.dept_edit_form.dept_pcode = ''
        this.dept_edit_form.dept_id = ''
        this.dept_edit_form.type = 'add'
      }
    }
  },
  methods: {
    // 获取按钮权限
    permissionAuth() {
      this.auth.save = this.permission.indexOf('/api/sys/dept/save')
      this.auth.update = this.permission.indexOf('/api/sys/dept/update')
    },
    // 新增编辑部门
    deptEditSubmit() {
      // 新增
      if (this.dept_edit_form.type === 'add') {
        this.dept_edit_form.dept_pcode = this.select_dept_data.dept_code
        save(this.dept_edit_form).then(response => {
          this.deptEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getDeptTree()
        })
      }
      // 修改
      if (this.dept_edit_form.type === 'edit') {
        update(this.dept_edit_form).then(response => {
          this.deptEditVisible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getDeptTree()
        })
      }
    },
    // 获取部门树
    getDeptTree() {
      tree().then(response => {
        this.dept_tree_data = this.formatTree(response.data, null)
        this.select_dept_data = this.dept_tree_data[0]
        this.getTableData(this.select_dept_data)
      })
    },
    formatTree(data, parentId) {
      var that = this
      var itemArr = [];
      data.forEach(function( val, index ) {
        if(val.dept_pcode === parentId){
          var newNode = {
            dept_code: val.dept_code,
            dept_id: val.dept_id,
            dept_name: val.dept_name,
            dept_pcode: val.dept_pcode,
            dept_pname: val.dept_pname,
            status_flag: val.status_flag,
            children: that.formatTree(data, val.dept_code)
          };
          if(newNode.children.length == 0){
            delete newNode.children;
          }
          itemArr.push(newNode); 
        }
      })
      return itemArr;
    },
    // 点击树状图获取表格数据
    getTableData(data) {
      this.select_dept_data = data
    },
    // 修改回显
    deptUpdate(data) {
      this.deptEditVisible = true
      this.dept_edit_form.dept_name = data.dept_name
      this.dept_edit_form.dept_id = data.dept_id
      this.dept_edit_form.type = 'edit'
    }
  },
  created() {
    this.permissionAuth()
    this.getDeptTree()
  }
}
</script>
<style lang="scss">
.tree_view{
  border-right: 1px solid #E1E3E6;
  background: #F5F7FA;
  padding-top: 16px;
  .el-tree{
    background: #F5F7FA;
  }
}
.table_view{
  padding-left: 16px;
  .main-header{
    padding: 10px 0;
  }
}
</style>
